<!DOCTYPE html>
<html>
<head>
    <title>Launch</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.dataviz.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.dataviz.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
</head>
<body>
    <a class="offline-button" href="../index.html">Back</a>
    
        <div id="example" class="k-content absConf">
            <div id="gauge-container">
                <div id="rpm"></div>
                <div id="kmh"></div>
                <div id="fuel"></div>
                <div id="water-temprature"></div>
            </div>

            <script>

                function createDashboard() {
                    $("#rpm").kendoRadialGauge({
                        theme: "black",

                        pointer: {
                            value: 0,
                            color: "#ea7001"
                        },

                        scale: {
                            startAngle: -45,
                            endAngle: 120,

                            min: 0,
                            max: 6,

                            majorUnit: 1,
                            majorTicks: {
                                width: 1,
                                size: 7
                            },

                            minorUnit: 0.2,
                            minorTicks: {
                                size: 5
                            },

                            ranges: [{
                                from: 4,
                                to: 5,
                                color: "#ff7a00"
                            }, {
                                from: 5,
                                to: 6,
                                color: "#c20000"
                            }],

                            labels: {
                                font: "11px Arial,Helvetica,sans-serif"
                            }
                        }
                    });

                    $("#kmh").kendoRadialGauge({
                        theme: "black",

                        pointer: {
                            value: 0,
                            color: "#ea7001"
                        },

                        scale: {
                            startAngle: -60,
                            endAngle: 240,

                            min: 0,
                            max: 220,

                            majorTicks: {
                                width: 1,
                                size: 14
                            },

                            minorTicks: {
                                size: 10
                            },

                            minorUnit: 2
                        }
                    });

                    $("#fuel").kendoRadialGauge({
                        theme: "black",

                        pointer: {
                            value: 0.5,
                            color: "#ea7001"
                        },

                        scale: {
                            startAngle: 90,
                            endAngle: 180,

                            min: 0,
                            max: 1,

                            majorUnit: 0.5,
                            majorTicks: {
                                width: 2,
                                size: 6
                            },

                            minorUnit: 0.25,
                            minorTicks: {
                                size: 3
                            },

                            ranges: [{
                                from: 0,
                                to: 0.1,
                                color: "#c20000"
                            }],

                            labels: {
                                font: "9px Arial,Helvetica,sans-serif"
                            }
                        }
                    });

                    $("#water-temprature").kendoRadialGauge({
                        theme: "black",

                        pointer: {
                            value: 90,
                            color: "#ea7001"
                        },

                        scale: {
                            startAngle: 180,
                            endAngle: 270,

                            min: 60,
                            max: 120,

                            majorUnit: 30,
                            majorTicks: {
                                width: 2,
                                size: 6
                            },

                            minorUnit: 10,
                            minorTicks: {
                                size: 3
                            },

                            ranges: [{
                                from: 110,
                                to: 120,
                                color: "#c20000"
                            }],

                            labels: {
                                font: "9px Arial,Helvetica,sans-serif"
                            }
                        }
                    });
                }

                var animateInterval;
                function animateDashboard() {
                    if (animateInterval) {
                        return;
                    }

                    var GEARS = [0.14, 0.06, 0.035, 0.027, 0.019],
                        IDLE_RPM = 0.9,
                        CHANGE_RPM = 4,
                        CHANGE_DELAY = 400,
                        DECAY_RATE = 0.0017,
                        TOP_SPEED = 210,
                        ACCELERATION = 0.6,
                        INTERVAL = 50;

                    var speed = 0,
                        skip = 0,
                        ratio,
                        gear = 0;

                    function update() {
                        $("#rpm").data("kendoRadialGauge").value(GEARS[gear] * speed + IDLE_RPM);
                        $("#kmh").data("kendoRadialGauge").value(speed);
                    }

                    animateInterval = setInterval(function() {
                        if(speed < TOP_SPEED) {
                            if (GEARS[gear] * speed > CHANGE_RPM && gear < GEARS.length) {
                                gear++;
                                skip = CHANGE_DELAY / INTERVAL;
                                update();
                            }

                            if (skip-- < 0) {
                                speed += ACCELERATION - (DECAY_RATE * speed);
                                update();
                            }
                        } else {
                            skip = 100;
                            speed = 0;
                            gear = 0;
                        }
                    }, INTERVAL);
                }

                $(document).ready(function() {
                    animateInterval = null;

                    createDashboard();
                    animateDashboard();

                    $(document).bind("kendo:skinChange", function(e) {
                        createDashboard();
                    });

                    $(document).bind("kendo:pageUnload", function(e) {
                        clearInterval(animateInterval);
                    });
                });
            </script>

            <style scoped>
                #main {
                    border-left: 0;
                    width: 940px;
                }
                #example {
                	background-color: #fff;
                }
                #gauge-container {
                    margin: 0 auto;
                    overflow: hidden;
                    width: 614px;
                    height: 324px;

                    background: transparent url("../../content/dataviz/dashboards/car-dashboard.png") no-repeat 50% 50%;
                }

                .k-gauge {
                    float: left;
                }

                #rpm {
                    width: 142px;
                    height: 147px;
                    margin: 85px 0 0 38px;
                }

                #kmh {
                    width: 216px;
                    height: 216px;
                    margin: 57px 0 0 20px;
                }

                #fuel {
                    width: 77px;
                    height: 84px;

                    margin: 90px 0 0 68px;
                }

                #water-temprature {
                    width: 84px;
                    height: 80px;

                    margin: -7px 0 0 62px;
                }
            </style>
        </div>


</body>
</html>
